<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table id="table"></table>

    <button id="btn">点击获取数据</button>


    <script src="./ajax.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.0/mock-min.js"></script>
    <script>

        Mock.mock('/students', function () {
            return Mock.mock({
                'students|10': [
                    {
                        'id|+1': 1,
                        'name': '@cname()',
                        'age|16-20': 1,
                        'gender|1': ["男", '女'],
                        'score|0-100': 1
                    }
                ]
            }).students
        })

        let btn = document.getElementById('btn');
        btn.onclick = function () {
            ajax({
                method: 'get',
                url: '/students',
                dataType: 'json',
                success: function (res) {
                    render(res)
                }
            })
        }




        function render(data) {
            let table = document.getElementById('table');
            data.forEach(item => {
                table.innerHTML += `
                    <tr>
                        <td>${item.id}</td>
                        <td>${item.name}</td>
                        <td>${item.age}</td>
                        <td>${item.gender}</td>
                        <td>${item.score}</td>
                    </tr>
                    `

            });
        }



    </script>

</body>

</html>